<script setup>
import { ref, onMounted, onUpdated } from 'vue';
import { logout } from '@/api/login';
import router from '@/router';
import { ElMessageBox } from "element-plus";
import axios from 'axios'
import { decodeJwtPayload } from '@/api/role'
import { takeAccessToken } from "@/api/login";

// 导入组件
import Appointment from '@/components/index/appointmentPage'
import Record from "@/components/index/recordPage"
import Profile from "@/components/index/profilePage"
import userManage from "@/components/index/userManage"
import feedBack from "@/components/index/feedBack";

// 这个是角色
const role = ref(null);
// 用户名
const username = ref('')

// 加载的时候，就获取用户信息
onMounted(() => {
  getAllInfo()
  getUsername()
  roleController()
})

function getAllInfo(){
  // 存储token的名字
  const authItemName = "access_token"
  // 取出token进行操作
  const authString = localStorage.getItem(authItemName) || sessionStorage.getItem(authItemName) || null

  // 使用JSON.parse方法将JSON字符串解析为JavaScript对象
  const authObj = JSON.parse(authString)

  // 解析值
  const authInfo = decodeJwtPayload(authObj.token)

  // 赋值
  role.value = authInfo.authorities[0]
}

// 默认激活的标签页
let activeName = ref('')
function roleController() {
  if(role.value === 'ROLE_stu') {
    return activeName.value = 'appointment'
  } else if(role.value === 'ROLE_doc') {
    return activeName.value = 'record'
  } else {
    return activeName.value = 'userManage'
  }
}

function displayAlert() {
  ElMessageBox.alert('校医室预约开放时间：9:00-18:00', '提示信息', {
    confirmButtonText: '收到信息',
    callback: () => {}
  })
}

// 一进入页面就执行 后续取消注释即可
onMounted(() => {

  // 如果是学生，就进行
  if(role.value === 'ROLE_stu') {
    displayAlert()
  }
})

function getUsername(){
  axios.get('/api/auth/me', {
    headers:{
      Authorization: `Bearer ${takeAccessToken()}`,
      "Content-Type": 'multipart/form-data'
    }
  })
  .then((res) => {
    // console.log(res.data.data.username)
    username.value = res.data.data.username
  })
  .catch((err) => {
    console.log(err)
  })
}

onUpdated(async () => {
  await getUsername()
})

// 退出登录
function userLogout() {
  logout(() => router.push('/'))
}

</script>

<template>
  <div>
    <!-- 页面总体设计 -->
    <el-container class="tainer">

      <!-- 头部 -->
      <el-header class="header">
        <h1>校医室预约管理平台</h1>

        <!-- 这里点击跳转到个人信息页面 @click="#" -->
        <div class="avatar">
          <el-avatar
              @click="activeName = 'profile'"
              shape="square"
              :size="40"
              src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png">
          </el-avatar>
          <h5>
            <span @click="activeName = 'profile'">你好，{{ username }}</span>
          </h5>
          <el-button @click="userLogout" type="danger">退出登录</el-button>
        </div>
      </el-header>

      <!-- 主要区域 -->
      <el-main class="main">
        <el-tabs v-model="activeName">

          <el-tab-pane v-if="role === 'ROLE_stu'" label="预约" name="appointment">
            <Appointment></Appointment>
          </el-tab-pane>

          <el-tab-pane v-if="role === 'ROLE_stu' || role === 'ROLE_doc'" label="查看预约记录" name="record">
            <keep-alive>
              <Record ref="recordComponent" v-if="activeName === 'record'"></Record>
            </keep-alive>
          </el-tab-pane>

          <el-tab-pane v-if="role === 'ROLE_man'" label="用户管理" name="userManage">
            <userManage></userManage>
          </el-tab-pane>

          <el-tab-pane  v-if="role === 'ROLE_stu' || role === 'ROLE_man'" label="意见反馈" name="feedBack">
            <keep-alive>
              <feedBack ref="feedBackComponent" v-if="activeName === 'feedBack'"></feedBack>
            </keep-alive>
          </el-tab-pane>

          <el-tab-pane label="个人信息" name="profile">
            <Profile></Profile>
          </el-tab-pane>

        </el-tabs>
      </el-main>

      <!-- 底部栏 -->
      <el-footer class="footer">
        <h5 style="font-weight: 500;color: grey">校医室预约管理系统</h5>
      </el-footer>

    </el-container>
  </div>

</template>

<style scoped>
body{
  overflow: hidden;
}
::v-deep .el-tabs__item {
  font-size: 20px;
}
::v-deep .el-form-item__label {
  font-size: 16px;
}
::v-deep .el-button--primary{
  font-size: 16px;
}

.tainer{
  padding: 50px 100px 0 100px;
}
.header{
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-wrap: nowrap;
  text-align: left;
  height: 10vh;
  line-height: 10vh;
}

.header>h1{
  font-size: 3vw;
  font-weight: normal;
}

.header>.avatar{
  display: flex;
  align-items: center;
  text-align: right;
}

.avatar>.el-avatar, .avatar>h5>span{
  cursor: pointer;
}

.avatar>h5{
  margin: 0 10px;
  font-weight: normal;
}

.main{
  padding-bottom: 8vh;
}

.footer{
  display: block;
  height: 8vh;
  line-height: 8vh;
  position: fixed;
  bottom: 0;
  left: 50%; /* 将元素的左边缘移动到父元素中心的位置 */
  transform: translateX(-50%); /* 向左移动元素自身宽度的一半，从而实现水平居中 */
  /*width: 100%; !* 确保底栏宽度与视口一致 *!*/
  /*background-color: #f5f5f5; !* 添加背景色，以便更好地看到底栏 *!*/
  /*z-index: 1; !* 确保底栏在其他内容之上 *!*/
}
</style>